<template>
  <button @click="toggle">显示隐藏图片</button>
  <!-- 在template中，使用模型数据，无须在.value，因为它会帮助我们自动解套 -->
  <img v-show="show" alt="Vue logo" src="../assets/vue.svg" />
  <hr />
  计数器：{{ count }}
  <button @click="increment">累加</button>
</template>

<!-- 使用setup语法糖之后的好处
代码更加精简，将来主要专注于写 定义模型数据、方法、计算属性、watch、...
注意：实现功能的函数，该引入还是要引入 -->
<script setup>
// vue3的组合式Api === Composition Api
// 暂时这里不使用setup语法糖

// 规律：vue3中实现绝大部分功能都需要使用函数，而大部分函数都需要导入
import { ref } from 'vue'

// 使用ref定义两个简单的模型数据
const show = ref(true)
console.log('---show---', show)
const count = ref(0)

const toggle = () => {
  // vue3中直接可以拿到外面定义的模型数据，所以没有必要用this
  // 如果是使用ref定义的模型数据，在js中，你要访问或是更改它的值，必须通过模型.value
  show.value = !show.value
}

const increment = () => {
  console.log('---increment---', count)
  count.value++
}
</script>
